<template>
  <div id="app">
    <button @click="handleHtype('left')">居左</button>
    <button @click="handleHtype('right')">居右</button>
    <button @click="handleVtype('top')">居上</button>
    <button @click="handleVtype('bottom')">居下</button>

    <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
      <vue-draggable-resizable
        v-if="show"
        :hType="hType"
        :vType="vType"
        :x="x"
        :y="y"
        :w="100"
        :h="100"
        :parent="true"
        :debug="false"
      >
        <p>vue-draggable-resizable</p>
      </vue-draggable-resizable>
    </div>

    <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;transform: scale(0.3);">
      <vue-draggable-resizable
        :w="100"
        :h="100"
        :parent="true"
        :debug="false"
        :min-width="200"
        :min-height="200"
        :scale="0.3"
      >
        <p>vue-draggable-resizable</p>
      </vue-draggable-resizable>
    </div>
  </div>
</template>

<script>
import VueDraggableResizable from './components/vue-draggable-resizable'
import './components/vue-draggable-resizable.css'

export default {
  name: 'app',
  components: {
    VueDraggableResizable
  },
  data() {
    return {
      hType: 'left',
      vType: 'top',
      x: 50,
      y: 80,
      show: true
    }
  },
  methods: {
    handleHtype(type) {
      this.show = false
      this.hType = type
      this.$nextTick(() => {
        this.show = true
      })
    },
    handleVtype(type) {
      this.vType = type
    }
  }
}
</script>

<style>
.vdr {
  border: 1px dashed black;
}
</style>
